<template>
  <!-- <div id="app" class="app">
        <div class="slide">
            <router-link to="/t-map">t-map</router-link>
            <router-link to="/t-painter">t-painter</router-link>
        </div>
        <router-view class="app-wrapper"></router-view>
    </div> -->
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
import Storage from './utils/Storage.js';
import Kernel from './core/Kernel.js';
import KernelWorker from '../workers/kernel.worker.js';
import offlineWorker from '../workers/offline.worker.js';
// import app from '../vendors/2D/app.js';
// import app from './vendors/3D/App.js';

export default {
  name: 'App',
  components: {},
  provide() {
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      isRouterAlive: true
    };
  },
  created() {
    this.init();
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
    init() {
      // console.warn('App.init: ');
      // app.getInstance(this.$root);
      // Init kernel to receive datas.
      // this.initKernel();
    },
    initKernel() {
      this.kernel = Kernel.getInstance(this.$root);
      this.kernel.initWorker(KernelWorker);
      // this.kernel.initHandleWsFunc(this.handleWsFunc);
      // this.kernel.initHandleResourcesFunc(this.handleResourcesFunc);
      // this.kernel.initHandleIncrementFunc(this.handleIncrementFunc);
      // this.kernel.initHandlePanicFunc(this.handlePanicFunc);
      // this.kernel.initHandleOfflineFunc(this.handleOfflineFunc);
      this.kernel.on('handleWs', this.handleWsFunc);
      this.kernel.on('handleResources', this.handleResourcesFunc);
      this.kernel.on('handleIncrement', this.handleIncrementFunc);
      this.kernel.on('handlePanic', this.handlePanicFunc);
      this.kernel.on('handleOffline', this.handleOfflineFunc);
      // this.handleOfflineConnect('LOGO');
      this.handleOfflineConnect('demo');
      // this.handleOfflineConnect('offline');
      // console.log('App.initKernel: ', this.kernel);
    },
    /** Kernel */
    handleOfflineConnect(name) {
      let virtualVehicles = 10;
      if (name === 'demo') virtualVehicles = 10;
      if (name === 'offline') virtualVehicles = 1000;
      Kernel.getInstance().offlineConnect(name, virtualVehicles, this.getMockResources(name));
    },
    getMockResources(name) {
      let lo = Storage.getSessionStorage('RESOURCES').get(name);
      if (lo) return lo;
      let mn = name.toLowerCase(),
        res = {
          models: require(`./mock/models.${mn}.json`),
          contours: require(`./mock/contours.${mn}.json`),
          paths: require(`./mock/paths.${mn}.json`)
        };
      // let b = window.btoa(JSON.stringify(res));
      // console.log('---> ', b);
      // let a = window.atob(b);
      // console.log('===> ', JSON.parse(a));
      Storage.getSessionStorage('RESOURCES').set(name, res);
      return res;
    },
    /** Kernel callback */
    handleWsFunc(res) { //eslint-disable-line
      // console.warn('App.handleWsFunc: ', res);
    },
    handleResourcesFunc(res) { //eslint-disable-line
      if (!res || !res.data || !res.data) return;
      // console.warn('App.handleResourcesFunc: ', res.data, this.$root.resources);
      // Object.keys(res.data).forEach(k => {
      //     // if (k !== 'contours' && k !== 'paths' && k !== 'vehicles') return;
      //     // app.getInstance().createResourcesLayers(k, res.data[k]);
      //     // k === 'models' && app.getInstance().createModels(res.data[k]);
      //     k === 'contours' && app.getInstance().createContours(res.data[k]);
      //     // k === 'paths' && app.getInstance().createPaths(res.data[k]);
      //     k === 'vehicles' && app.getInstance().createVehicles(res.data[k]);
      //     // k === 'vehicles' && console.log('@@@@@@@', k, res.data[k]);
      // });
    },
    handleIncrementFunc(res) { //eslint-disable-line
      // // console.warn('App.handleIncrementFunc: ', res, Kernel.getInstance().updatesPool);
      if (!res || !res.data || !res.data) return;
      // Object.keys(res.data).forEach(k => {
      //     k === 'contours' && app.getInstance().updateContours(res.data[k]);
      //     k === 'vehicles' && app.getInstance().updateVehicles(res.data[k]);
      // });
    },
    handlePanicFunc(res) { //eslint-disable-line
      // console.warn('App.handlePanicFunc: ', res);
    },
    handleOfflineFunc(res) { //eslint-disable-line
      // console.warn('App.handleOfflineFunc: ', res);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
@import './scss/app';

body {
  margin: 0;
  padding: 0;
}

.app {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;

  .slide {
    flex: 0 0 auto;
    width: 80px;
    padding: 200px 0 0 20px;
    box-shadow: 6px 6px 10px #cccccc;
    display: flex;
    flex-direction: column;
  }

  .app-wrapper {
    flex: 1 1 auto;
  }
}
</style>
